<template>
    <div class="page-store-platform-store-present bg-content">
        <u-sticky>
            <div style="height: 49px; border-bottom: 1rpx solid #eeeeee; background-color: #FFFFFF;">
                <u-tabs :list="tabList" name="title" :gutter="20" active-color="red" :is-scroll="false" :current="activeTabIndex"
                        @change="onTabChange"></u-tabs>
            </div>
        </u-sticky>
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="text-align: center; background: white; width: 900px;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 100px;">动态类型</div>
                    <div class="td text-center bold" style="width: 100px;">发布者</div>
                    <div class="td text-center bold" style="width: 150px;">发布时间</div>
                    <div class="td text-center bold" style="width: 250px;">标题</div>
                    <div class="td text-center bold" style="width: 100px;">发布状态</div>
                    <div class="td text-center bold" style="width: 200px;">操作</div>
                </div>
                <div class="tr" v-for="(item, index)  in tbCommunityDynamicList" :key="item.id">
                    <div class="td text-center" style="width: 100px;">{{item.tbCommunityDynamicType.name}}</div>
                    <div class="td text-center" style="width: 100px;">{{item.sysUser.username}}</div>
                    <div class="td text-center" style="width: 150px;"> {{item.showTime}}</div>
                    <div class="td text-center" style="width: 250px; text-decoration: underline;"
                         @click="navigateTo(`/pages/sub/sub1-tabs/tabs/community-dynamic/community-dynamic-list/community-dynamic-detail/index`, null, item)">{{item.title}}
                    </div>
                    <div class="td text-center" style="width: 100px;">{{item.isPublish ? '已发布' : '未发布'}}</div>
                    <div class="td text-center" style="width: 200px;">
                        <label style="margin-right: 15px; text-decoration: underline;"
                               @click="navigateTo('/pages/sub/sub3-community-platform/community-platform/community-platform-dynamic/community-platform-dynamic-edit/index', null, item)">
                            编辑
                        </label>
                        <label style="margin-right: 15px; text-decoration: underline;" @click="deleteItem(item, index)">
                            删除
                        </label>
                        <label style="margin-right: 15px; text-decoration: underline;" v-if="item.isPublish" @click="updateDynamic(item, false)">
                            取消发布
                        </label>
                        <label style="margin-right: 15px; text-decoration: underline;" v-if="!item.isPublish" @click="updateDynamic(item,true)">
                            立即发布
                        </label>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo('/pages/sub/sub3-community-platform/community-platform/community-platform-dynamic/community-platform-dynamic-add/index')">
                添加
            </label>
        </div>
    </div>
</template>

<script>
    import {TbCommunityDynamicService} from "@/dev/services/tb-community-dynamic.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                tabList: [
                    {title: '全部', isPublish: null},
                    {title: '未发布', isPublish: '0'},
                    {title: '已发布', isPublish: '1'},
                ],
                activeTabIndex: -1,
                tbCommunityDynamicList: []
            }
        },
        onShow() {
            const _self = this;
            if (this.activeTabIndex !== parseInt(this.urlParams.activeTabIndex)) {
                this.activeTabIndex = parseInt(this.urlParams.activeTabIndex)
            } else {
                this.doRefresh(this.tbCommunityDynamicList);
            }
            this.$forceUpdate();
        },
        watch: {
            activeTabIndex: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    console.log("activeTabIndex参数改变，即将刷新...", `新值：${newVal}`, `旧值：${oldVal}`)
                    this.doRefresh(this.tbCommunityDynamicList)
                }
            }
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite()
            }
        },
        methods: {
            onTabChange(index) {
                const _self = this;
                this.activeTabIndex = index;
                this.urlParams.activeTabIndex = this.activeTabIndex;
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbCommunityDynamicService().findTableTbCommunityDynamicList({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        userId: _self.globalVariable.userInfo.id,
                        isPublish: _self.tabList[_self.activeTabIndex].isPublish,
                        deleted: 0,
                        orderBy: 'create_time desc'
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbCommunityDynamicList = [..._self.tbCommunityDynamicList, ...result.list];
                });
            },
            updateDynamic(item, isPublish) {
                const _self = this;
                CommonUtil.alert({
                    title: '动态发布后对商城用户可见！',
                    content: isPublish ? '确定立即发布该动态吗？' : '确定取消发布该动态吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbCommunityDynamicService().updateTbCommunityDynamic({id: item.id, isPublish: isPublish}).then(result => {
                                item.isPublish = isPublish;
                                CommonUtil.alert('操作成功');
                            });
                        }
                    }
                });
            },
            /**
             * 删除规格
             * @param item
             * @param index
             */
            deleteItem(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除该动态吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbCommunityDynamicService().deleteTbCommunityDynamicByIds(item.id).then(result => {
                                _self.tbCommunityDynamicList.splice(index, 1);
                                CommonUtil.toast('删除成功');
                            });
                        }
                    }
                });
            }
        }
    }
</script>
